<template>
    <el-dialog :modelValue="drawer" :append-to-body="true" @close="close" width="725px">
        <template #header>
            <div v-drag="['.el-dialog', '.el-dialog__header']">新建总结</div>
        </template>
        <el-form size="small" :model="form" :rules="rules" label-position="top" ref="ruleRefForm">
            <el-form-item label="总结内容" prop="content">
                <Editor :modelValue="form.content" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-row justify="center">
                <el-button size="small" type="primary" @click="submitForm(ruleRefForm)">提交</el-button>
                <el-button size="small" type="default" @click="resetForm(ruleRefForm)">取消</el-button>
            </el-row>   
        </template>
    </el-dialog>
</template>

<script>
import { toRefs, computed, reactive, ref, watch } from 'vue'
import Editor from '/@/components/editor/index.vue'
export default {
    name: 'SummaryForm',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        defaultForm: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    components: {
        Editor
    },
    emits: ['update:dialogDrawer', 'onSubmit'],
    setup(props, context) {
        const { dialogDrawer, defaultForm } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const eventForm = computed({
            get: () => {
                return defaultForm.value
            }
        })
        const ruleRefForm = ref()
        watch(() => dialogDrawer.value,
            val => {
                if(val) {
                    state.form.content = eventForm.value.content
                }
            }
        )
        const close = () => {
            context.emit('update:dialogDrawer', false)
            ruleRefForm.value.resetFields()
        }
        const state = reactive({
            form: {
                content: ''
            },
            rules: {
                content: [{required: true, message: '请输入总结内容'}]
            }
        })
        const submitForm = async formEl => {
            if (!formEl) return
            await formEl.validate((valid, fields) => {
                if (valid) {
                    context.emit('onSubmit', state.form)
                    close()
                } else {
                    console.log('error submit!', fields)
                }
            })
        }
        // 关闭, 重置
        const resetForm = formEl => {
            if (!formEl) return
            formEl.resetFields()
            close()
        }
        return {
            ...toRefs(state),
            drawer,
            close,
            submitForm,
            ruleRefForm,
            resetForm
        }
    }
}
</script>

<style>

</style>